<style lang="scss" >
page {
	// overflow: hidden;
	background: $button-linear-bg;
}
.wrapper{
	height: 100vh;
	width:100vw;
	overflow: hidden;
	.login-top{
		height: 28vh; 
		// width: 80vw;
		margin: 0px auto;
		background: url('../../common/images/login/login-bg.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		padding: 10px 5vw;
		.login-top-title{
			color: #fff;
			font-size: $uni-font-size-xxl;
			font-weight: bold;
			padding-top: 40px;
		}
		.login-top-button-box{
			display: flex;
			justify-content: space-between;
			align-items: center;
			text-align: center;
			padding-top: 40px;
			margin-bottom: 20px;
			.login-top-button{
				background: #fff;
				width: 32vw;
				padding: 10px 0;
				border-radius: $uni-border-radius-xl;
			}
			.login-top-button-active{
				background: rgba(255,255,255,0.7)!important;
			}
		}
	}
	
}
.login-form {
	position: relative;
	box-shadow: 0px R(19px) R(35px) 0px rgba(169, 169, 169, 0.26), 0px R(7px) R(156px) R(5px) rgba(210, 210, 210, 0.06);
	height: 80vh; 
	width: 100vw;
	margin: -10px auto 20px auto;
	background: #fff;
	border-top-right-radius:$uni-border-radius-xl;
	border-top-left-radius: $uni-border-radius-xl; 
	padding: 20px;
	
	.register-box{
		overflow: hidden;
		position: relative;
		right: -20px;
		margin-bottom: 20px;
		.register{
			float: right;
			font-size: $uni-font-size-sm;
			background: #000;
			color: #fff;
			padding: 5px 10px;
			border-top-left-radius: 16px;
			border-bottom-left-radius: 16px;
		}
	}
	.login-item {
		background-color: rgba(184, 158, 206,0.1);
		border-radius: R(10px);
		padding: R(10px) R(20px);
		display: flex;
		align-items: center;
		.iconfont {
			font-size: 0.45px;
			margin: 0 R(10px) 0 R(40px);
			color: #666;
		}

		/deep/ input {
			display: block;
			-webkit-box-flex: 1;
			font-size: R(30px);
			padding-left: 5px;
			border-radius: R(50px);
		}

		.eyes_box {
			width: R(120px);
			text-align: center;
			display: block;
		}

		.eyes_box .iconfont {
			font-size: R(50px);
			color: #989898;
		}

		.code image {
			height: 100%;
		}
	}
}

.pxenber-passwd {
	margin: R(20px) 0;
	display: flex;
	align-items: center;
	color: #666;
}

.pxenber-passwd input {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: R(40px);
	margin-right: 0.1px;
	height: R(40px);
	background: url('@/common/images/checkoff.png') no-repeat;
	background-size: cover;
}

.pxenber-passwd input:checked {
	background: url('@/common/images/checkon.png') no-repeat;
	background-size: cover;
}

.clear_input {
	font-size: R(20px);
	width: R(40px);
	margin: 0 R(10px);
	height: R(40px);
	border-radius: 100%;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.3);
}

.login_btn .btn-defult{
	display: block;
	width: 100%;
	height: R(90px);
	text-align: center;
	border: none;
	outline: none;
	color: #fff;
	border-radius: R(45px);
	line-height: R(80px);
	letter-spacing: R(5px);
	font-weight: 700;
	// background-image: linear-gradient(90deg, #1a9afd, #0e6bdb);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff1a9afd", endColorstr="#ff0e6bdb", GradientType=1);
	box-shadow: 0 0 R(20px) rgba(92, 176, 255, 0.5);
}



.agreement {
	text-align: center;
	margin: R(50px) auto;
	font-size: R(24px);
	z-index: 1;
}

.agreement text {
	color:$themeColor;
}
.login_btn {
	margin-top: R(20px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-size: $uni-font-size-sm;
	border-radius: $uni-border-radius-lg;
}

.passwordCheck {
	display: flex;
	justify-content: space-between;
	overflow: hidden;
	margin-top: $uni-spacing-col-lg;
}

.pxenberdiv {
	flex: 4;
}

.forgotdiv {
	float: right;
}

.pxenber-passwd {
	font-size: R(24px);
	font-family: PingFang SC;
	font-weight: bold;
	color: #727070;
}


.p-form {
	// box-shadow: -19px 12px 46px 0px rgba(6, 6, 6, 0.15);
	border-radius: R(25px);
	width: 100%;
	margin: 0 auto;
	position: absolute;
	left: 50%;
	top: 48%;
	z-index: 2;
	transform: translate(-50%, -50%);

	.login-item {
		height: R(100px);
		margin: R(10px) 0 R(40px) 0;
		border-bottom: 1px solid #eee;
		line-height: 24px;
		display: flex;
		align-items: center;
		padding: 0 R(40px);

		/deep/.u-cell-item {
			padding: 10px 7px;
		}

		.name {
			width: 30px;
			height: 30px;
			margin-right: R(30);
		}

		.passwd {
			width: R(35px);
			height: R(41px);
			margin-right: R(30);
		}
	}
}

/deep/ .u-checkbox__icon-wrap {
	border: 1px solid $themeColor;
}

.theme {
	background: $themeColor;
	// background: linear-gradient(90deg, #63aaf6 0%, #3d85eb 100%);
	width: 90%;
	line-height: R(100px);
	border-radius: $uni-border-radius-xl;
	font-size: $uni-font-size-sm;
	color: #fff;
}


.agreement {
	/deep/ .u-checkbox {
		width: 20px;
		margin: 0;
		padding: 0;
	}
}
</style>
<template>
	<view ref="" class="wrapper">
		<view class="login-top" >
			<view class="login-top-title">欢迎来到{{title}}</view>
			<!-- <view class="login-top-button-box">
				<view class="login-top-button">商户</view>
				<view class="login-top-button login-top-button-active">服务商</view>
			</view> -->
		</view>
		<view class="login-form">
			<!-- <view class="register-box">
				<view class="register" style="">注册</view>
			</view> -->
			<ul style="margin-top: 30px;">
				<li style="margin-bottom: 40rpx" class="login-item touch-hflexbox">
					<!-- <image class="name" :src="require('@/common/images/login/form-name.png')" alt="" /> -->
					<u-input type="text" v-model="loginForm.username" clearable placeholder="手机号" />
				</li>
				<li class="login-item touch-hflexbox">
					<!-- <image class="passwd" :src="require('@/common/images/login/form-password.png')" alt="" /> -->
					<u-input type="password" v-model="loginForm.password" clearable :maxlength="20" placeholder="密码" />
				</li> 
			</ul>
			<view class="passwordCheck">
				<view class="pxenberdiv">
					<u-checkbox active-color="#7B4EFF" v-model="loginForm.passwordCheck" shape="circle"><p class="pxenber-passwd">记住密码</p></u-checkbox>
				</view>
				<view class="forgotdiv"><p @click="forgotpasswordHandle" class="pxenber-passwd">忘记密码?</p></view>
			</view>
			
			<view class="login_btn">
				<button class="theme" @click="handleLogin">登录</button>
			</view>
			<view class="agreement flex-center">
				<u-checkbox active-color="#7B4EFF" v-model="loginForm.isAgree" shape="circle"></u-checkbox>
				我已阅读
				<text @click="handleAgreement(2)">《用户协议》</text>
				和
				<text @click="handleAgreement(1)">《隐私政策》</text>
				，并同意协议内容
			</view>
		</view>
	</view>
</template>

<script>
import { isMobile } from '_c/utils/validate';
import mumuGetQrcode from '@/uni_modules/mumu-getQrcode/components/mumu-getQrcode/mumu-getQrcode.vue';
import { getSysParam, getSysDict, getSysValue,centerDept,getAppConfig } from '_a/sms';
import { agentRole } from '_a/myInfo';

export default {
	name: 'login',
	components: {
		mumuGetQrcode
	},
	data() {
		return {
			loginForm: {
				username: '',
				password: '',
				passwordCheck: false,
				isAgree: false
				// code:123
			},
			isIphone: false,
			userAgent: '', //浏览器信息
			show: false,
			logoInfo: {
				logoImg: require('@/common/images/login/logo.png'),
				name: ''
			},
			title: ''
		};
	},
	async created() {
		/** 请求版本更新 **/
		let that = this;
		
		// #ifdef H5
		let hostname = window.location.hostname
		let res = await getAppConfig({
			url: hostname
		})
		if (res.data && res.code == 200) {
			this.$store.commit('SETAppConfig', res.data)
		} else {
			this.$store.commit('SETAppConfig', null)
		}
		let appConfig = this.$store.getters.appConfig || null
		if(appConfig) {
			// console.log('app配置信息')
			// console.log(appConfig)
			this.title = appConfig.appName
		}
		// #endif
	},
	async onLoad(options) {
		// 获取完整的当前页面路径（H5 环境）
		// if (process.env.VUE_APP_PLATFORM === 'h5') {
		//   const fullUrl = window.location.href;
		//   console.log('域名--' + fullUrl)
		//   const withoutProtocol = fullUrl.replace(/^https?:\/\//, '');
		//   console.log('url--' + withoutProtocol)
		//   const target = withoutProtocol.split('.')[0];ag	
		//   if(target == "jzyapp") {
		// 	  this.title = '聚直赢'
		//   }else if(target == "yzsapp") {
		// 	  this.title = '易直刷'
		//   }
		//   if(withoutProtocol == 'app.uoopos.com') {
		// 	  this.title = '盛嘉 PAY'
		//   }
		// }
		// #ifdef APP-PLUS
		// await this.$scope.$parent.$options.onLaunch(); // 确保App.vue初始化完成
		// let name = uni.getStorageSync('appName') || '收款宝';
		// this.title = name;
	    // 检查全局标志
		if (getApp().globalData.appInitialized) {
			this.title = uni.getStorageSync('appName') || '';
			const timer = setInterval(() => {
				if (getApp().globalData.appInitialized) {
				  clearInterval(timer);
				  this.title = uni.getStorageSync('appName') || '';
				}
			}, 100);
		} else {
			// 如果App未初始化，延迟检查
			const timer = setInterval(() => {
			if (getApp().globalData.appInitialized) {
			  clearInterval(timer);
			  this.title = uni.getStorageSync('appName') || '';
			}
		  }, 100);
		}
		// #endif
	},
	async onShow() {
		/** 如果勾选了记住密码 **/
		let rememberpasswordUser = this.$store.getters.rememberPasswordUser;
		// uni.showModal({
		//    title: '提示',
		//    content: rememberpasswordUser,
		//    showCancel: false
		// });
		
		// uni.showModal({
		//    title: '提示',
		//    content: JSON.stringify(rememberpasswordUser),
		//    showCancel: false
		// });
		console.log(rememberpasswordUser);
		if (rememberpasswordUser && rememberpasswordUser != 'null') {
			console.log(rememberpasswordUser);
			this.loginForm = rememberpasswordUser;
		}
		//#ifdef MP-WEIXIN
		uni.hideHomeButton();
		// #endif
		// #ifdef H5
		await this.AppLocalVersion();

		// #endif
	},
	// computed: {
	// 	appConfig() {
	// 		return this.$store.getters.appConfig || null
	// 	}
	// },
	methods: {
		async AppLocalVersion() {
			// let deptInfo = await centerDept();
			// if(deptInfo.data.deptId){
			// 	let appLocalVersionRes = await getSysParam(`${deptInfo.data.deptId}:appLocalVersion`);
			// 	if(appLocalVersionRes.msg){
			// 		this.$store.dispatch('checkIosAppLocalVersion', appLocalVersionRes.msg);
			// 	} 
			// }
			await getSysParam('appLocalVersion').then(res => {
				this.$store.dispatch('checkIosAppLocalVersion', res.msg);
			});
		},
		
		toW() {
			// 扫码成功回调
			var barcode = plus.barcode.create('barcode', [plus.barcode.QR], {
				top: '100px',
				left: '0px',
				width: '100%',
				height: '500px',
				position: 'static'
			});
			barcode.onmarked = function(type, result) {
				var text = '未知: ';
				switch (type) {
					case plus.barcode.QR:
						text = 'QR: ';
						break;
					case plus.barcode.EAN13:
						text = 'EAN13: ';
						break;
					case plus.barcode.EAN8:
						text = 'EAN8: ';
						break;
				}
				alert(text + result);
			};
			plus.webview.currentWebview().append(barcode);
			barcode.start();

			// uni.navigateTo({
			// 	url: '/pages/login/sancode/sancode'
			// });
		},

		clickShow1() {
			this.show = true;
		},

		clickShow() {
			const currentWebview = plus.webview.currentWebview(); //注意相关操作写在APP-PLUS条件编译下
			var barcode = plus.barcode.create('barcode', [plus.barcode.QR], {
				top: '100px',
				left: '0px',
				width: '300px',
				height: '300px',
				position: 'static'
			});
			//此处未演示扫码成功回调的地址设置，实际请参考HTML5Plus API自行处理
			barcode.onmarked = function(type, result) {
				console.log(result);
			};
			// barcode.setFlash(true);
			console.log(barcode);
			//注意扫码区域需为正方形，否则影响扫码识别率
			currentWebview.append(barcode);
			barcode.start();
		},
		qrcodeSucess(data) {
			uni.showModal({
				title: '成功',
				content: data,
				success: () => {
					uni.navigateBack({});
				}
			});
		},
		qrcodeError(err) {
			console.log(err);
			uni.showModal({
				title: '摄像头授权失败',
				content: '摄像头授权失败，请检测当前浏览器是否有摄像头权限。',
				success: () => {
					uni.navigateBack({});
				}
			});
		},
		async getConfig() {
			let systemParams = {};
			// 轮播图片
			// await getSysParam('bannerList').then(res => {
			// 	if (res.data && res.data.param) {
			// 		let list = res.data.param;
			// 		this.$store.commit('setBannerList', list);
			// 	}
			// });
			await getSysDict('balance_type').then(res => {
				if (res.data && res.data.length) {
					let list = res.data.map(item => {
						let { dictLabel, dictValue } = item;
						item = {
							dictLabel,
							dictValue
						};
						return item;
					});
					this.$store.commit('setBalanceList', list);
				}
			});
			await getSysDict('total_type').then(res => {
				if (res.data && res.data.length) {
					let list = res.data.map(item => {
						let { dictLabel, dictValue } = item;
						item = {
							dictLabel,
							dictValue
						};
						return item;
					});
					this.$store.commit('setTotalTypeList', list);
				}
			});
			// // 系统参数
			// await getSysParam('OperatorConfigure').then(res => {
			// 	if (res.data && res.data.param) {
			// 		Object.assign(systemParams, res.data.param)
			// 		// systemParams.userWithdrawLowerAmount = res.data.param.userWithdrawLowerAmount;
			// 	}
			// });
			// this.$store.commit('set_system_config', systemParams);
		},
		onChange() {
			this.loginForm.passwordCheck = !this.loginForm.passwordCheck;
		},
		async getImgConfig() {
			// 轮播图片
			await getSysParam({
				code: 'banner_list'
			}).then(res => {
				if (res.data && res.data.value) {
					let list = JSON.parse(res.data.value);
					this.$store.commit('setBannerList', list);
				}
			});
			// 分享海报图片
			await getSysParam({
				code: 'share_poster'
			}).then(res => {
				if (res.data && res.data.value) {
					let list = JSON.parse(res.data.value);
					this.$store.commit('setSharePoster', list);
				}
			});
		},
		handleAgreement(type) {
			/** 协议 **/
			this.$nav.push({
				path: '/pages/login/agreement/index',
				query: {
					// invitationCode: this.costomData.invitationCode,
					type: type,
					pageType: 'log'
				}
			});
		},
		handleLogin() {
			console.log(this.loginForm.username)
			/**  登录 **/
			let message = '';
			if (!this.loginForm.password) {
				message = '请输入登录密码';
			}
			if (isMobile(this.loginForm.username)) {
				message = '账号格式不正确';
			}
			if (!this.loginForm.isAgree) {
				message = '请同意并勾选下方协议';
			}
			if (message) {
				this.$tip.toast(message);
				return false;
			}

			this.$tip.loading('正在登录中...');
			// console.log("this.loginForm",this.loginForm)
			this.$store.dispatch('StoreByLogin', this.loginForm).then(async res => {
				if (res.code === 200) {
					console.log('res', res);
					this.$store.dispatch('getUserDetail').then(data => {
						if (data.info.linkMobile == '13538844413') {
							this.$store.commit('set_isSpecific', false);
						} else {
							this.$store.commit('set_isSpecific', false);
						}
					});
					this.$tip.loaded();

					await this.getConfig();
					this.$nav.switchTab({
						path: '/pages/home/home/index'
					});

					// this.$store
					//   .dispatch("checkByFenQiOrder")
					//   .then((res) => {
					//     this.$nav.push({ path: "home" });
					//   })
					//   .catch((err) => {
					//     this.$nav.push({ path: "home" });
					//   });
				}
				this.$tip.loaded();
			});
		},
		forgotpasswordHandle() {
			this.$nav.push({
				path: '/pages/myInfo/forgot-password/index'
			});
		},
		toRegisteredHandle() {
			this.$nav.push({
				path: '/pages/home/invitation/invitationRegistered'
			});
		}
	}
};
</script>
